<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/base_body_header.jsp" %>
<%@include file="../common/navbar.jsp" %>
<%@include file="../common/page_content_pre.jsp" %>

<link rel="stylesheet" href="${GLOBAL.staticJsPath}/assets/qiniu/fileupload.css"/>
<link rel="stylesheet" href="${GLOBAL.staticJsPath}/jquery-select2/3.4/select2.min.css"/>

<div class="page-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="widget-box">
                <div class="widget-header">
                    <h4>${not empty contract.contractId?'修改':'添加'}合同</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <form:form class="form-horizontal" modelAttribute="contract" enctype="multipart/form-data"
                                   action="${GLOBAL.basePath}/contract/save" method="post" id="contractForm">
                            <form:input path="contractId" type = "hidden"/>
                            <input id="cellId" type="hidden" value="${contract.cellId}">
                            <input id="unitId" type="hidden" value="${contract.unitNo}">
                            <input id="roomId" type="hidden" value="${contract.roomNo}">

                            <c:if test="${not empty contract.contractId}">
                                <fieldset>
                                    <div class="form-group">
                                        <span class="col-sm-3 control-label">合同编号：</span>
                                        <label class="control-label">${contract.contractId}</label>
                                    </div>
                                </fieldset>
                            </c:if>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">客户姓名：</label>
                                    <div class="col-sm-5">
                                        <form:input path="customerName" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="请输入客户姓名"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2"></label>
                                    <table>
                                        <tr>
                                            <td width="85px">小区名称：</td>
                                            <td class="col-sm-4">
                                                <form:select id="houseId" path="houseId"
                                                             class="js-example-basic-single" style="width:100%;"
                                                             onchange="selectNbh()">
                                                    <optgroup label="">
                                                        <option value="0" selected=selected>--请选择小区--</option>
                                                        <form:options items="${neighborhoodList}" itemLabel="nbhName"
                                                                      itemValue="nbhId" htmlEscape="false"/>
                                                    </optgroup>
                                                </form:select>
                                            </td>
                                            <td style="width: 60px;" align="right">楼号：</td>
                                            <td>
                                                <form:select path="cellId" id="cellInfoId" onchange="selectCell()" style="width: 110px">
                                                    <option value="0">--楼栋号--</option>
                                                </form:select>&nbsp;
                                            </td>
                                            <td style="width: 60px;" align="right">单元号：</td>
                                            <td>
                                                <form:select path="unitNo" id="unitNoId" onchange="selectUnit()" style="width: 80px">
                                                    <option value="0">--单元号--</option>
                                                </form:select>&nbsp;
                                            </td>
                                            <td style="width: 60px;" align="right">门牌号：</td>
                                            <td>
                                                <form:select path="roomNo" id="roomNoId" style="width: 80px">
                                                    <option value="0">--门牌号--</option>
                                                </form:select>&nbsp;
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">成交价：</label>

                                    <div class="col-sm-5">
                                        <form:input path="transactionPrice" htmlEscape="false"
                                                    class="input-xlarge required" type = "number"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">成交时间：</label>

                                    <div class="col-sm-4">
                                        <input name="transactionDate" readonly="true"
                                               value = "<fmt:formatDate value="${contract.transactionDate}" pattern="yyyy-MM-dd HH:mm:ss" />"
                                               class="col-sm-10 required"
                                               onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">经纪人：</label>

                                    <div class="col-sm-5">
                                        <form:select path="userId" style="width:280px">
                                            <c:forEach items="${users}" var="item">
                                                <c:if test="${item.userId == contract.userId}">
                                                    <form:option value="${item.userId}"
                                                                 selected="selected">${item.username}</form:option>
                                                </c:if>
                                                <c:if test="${item.userId != contract.userId}">
                                                    <form:option value="${item.userId}">${item.username}</form:option>
                                                </c:if>
                                            </c:forEach>
                                        </form:select>
                                    </div>
                                </div>
                            </fieldset>

                            <hr/>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">合同文档：</label>

                                    <div class="col-sm-6">
                                        <div id="photos" class="row" style="width:750px">
                                            <div id="container" class="col-xs-4">
                                                <img src="${GLOBAL.staticImagePath}/add_bg.png">

                                                <div class="add">
                                                    <img id="addfile" src="/images/add.png">
                                                </div>
                                            </div>

                                            <div id = "contractLocationDiv" class="col-xs-4">
                                                <c:if test="${not empty contract.contractLocation}">
                                                    <label><a href="${contract.contractLocation}" target="_blank">${contract.contractLocation}</a></label>
                                                </c:if>
                                            </div>
                                            <input id = "contractLocation" name ="contractLocation" type="hidden" value="${contract.contractLocation}">
                                        </div>
                                        <span id="uploadInfo" style="color: red"></span>
                                    </div>
                                </div>
                            </fieldset>

                            <hr/>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">实景图：</label>

                                    <div class="col-sm-6">
                                        <div id="photos1" class="row" style="width:750px">
                                            <div id="container1" class="col-xs-4">
                                                <img src="${GLOBAL.staticImagePath}/add_bg.png">

                                                <div class="add">
                                                    <img id="addfile1" src="/images/add.png">
                                                </div>
                                            </div>

                                            <c:if test="${photoList!= null || fn:length(photoList) > 0}">
                                                <c:forEach items="${photoList}" var="item" varStatus="plist">
                                                    <div id="${item.photoSource}-id" class="col-xs-4"><img
                                                            id="${item.photoSource}"
                                                            src="${storeUrl}${item.photoSource}?imageView2/0/w/160/h/160">

                                                        <div class="q-label"><input value="${item.photoDesc}"></div>
                                                        <div class="delete" onclick="deletePic($(this).parent())"><img
                                                                src="/images/delete.png"></div>
                                                    </div>
                                                </c:forEach>
                                            </c:if>
                                        </div>
                                        <span id="uploadInfo1" style="color: red"></span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <div id="upload_file_container"></div>
                                </div>
                            </fieldset>

                            <div class="form-actions center">
                                <button type="button" class="btn btn-sm btn-grey" id="go_back_btn">
                                    返回
                                    <i class="icon-reply icon-on-right bigger-110"></i>
                                </button>
                                <shiro:hasPermission name='contract:edit'>
                                    <button type="button" class="btn btn-sm btn-success" id="save_btn">
                                        保存
                                        <i class="icon-save icon-on-right bigger-110"></i>
                                    </button>
                                </shiro:hasPermission>
                            </div>
                        </form:form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="../common/page_content_suf.jsp" %>
<%@include file="../common/script.jsp" %>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/plupload.full.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/moxie.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/qiniu.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/my97/WdatePicker.js"></script>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/uploadFile/contract/fileupload.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/uploadFile/contract/fileupload1.js"></script>

<script src="${GLOBAL.staticJsPath}/jquery-select2/3.4/select2.min.js"></script>

<script type="text/javascript">
    var qiniuDomain = '${GLOBAL.basePath}';
    var qiniuPath = '${GLOBAL.qiniuPath}';

    $(document).ready(function () {
        $(".js-example-basic-single").select2(); //
        selectNbh();

        $("#contractForm").validate({
        });

        $("#go_back_btn").on("click", function () {
            goBack();
        });

        $("#save_btn").on("click", function () {
            saveBtn();
        });
    });

    function saveBtn(){
        if($("#contractLocation").val() == ''){
            $("#uploadInfo").html("附件不能为空");
        }else{
            var data = getAllImageInfo1();
            if (data.success) {
                $("#contractForm").submit();
            } else {
                alert(data.msg);
            }
        }
    };

    function selectNbh() {
        var nbhId = $("#houseId").val();
        $("#cellInfoId").empty();
        $.ajax({
            type: 'post',
            url: '${GLOBAL.basePath}/houseInfo/queryCellInfo',
            dataType: "json",
            data: {
                nbhId: nbhId
            },
            success: function (data) {
                if (data.data.length > 0) {
                    data = data.data;
                    $("#cellInfoId").append("<option value='0'>--楼栋号--</option>");
                    var opValue = "";
                    for (var i = 0; i < data.length; i++) {
                        var optionValue;
                        var cellIdVal = $("#cellId").val();

                        if(opValue == data[i].buildingNo){
                            continue;
                        }
                        opValue = data[i].buildingNo;

                        if (cellIdVal != "") {
                            if (data[i].cellId == cellIdVal) {
                                optionValue = "<option value='" + data[i].cellId + "'selected = 'selected'>" + data[i].buildingNo + "</option>";
                                $("#cellId").val("");
                            }
                        } else {
                            optionValue = "<option value='" + data[i].cellId + "'>" + data[i].buildingNo + "</option>";
                        }

                        $("#cellInfoId").append(optionValue);
                    }
                } else {
                    $("#cellInfoId").append("<option value='0'>--楼栋号--</option>");
                }
            }
        });
        selectCell();
    };

    function selectCell(){
        var nbhId = $("#houseId").val();
        var cellInfoId = $("#cellInfoId").find("option:selected").text();
        $("#unitNoId").empty();
        $.ajax({
            type: 'post',
            url: '${GLOBAL.basePath}/houseInfo/queryCellInfo',
            dataType: "json",
            data: {
                nbhId: nbhId,
                cellInfoId: cellInfoId
            },
            success: function (data) {
                if (data.data.length > 0) {
                    $("#unitNoId").append("<option value='0'>--单元号--</option>");
                    data = data.data;
                    var opValue = "";
                    for (var i = 0; i < data.length; i++) {
                        var optionValue;
                        var cellIdValUnit = $("#unitId").val();

                        if(opValue == data[i].unitNum){
                            continue;
                        }
                        opValue = data[i].unitNum;

                        if (cellIdValUnit != "") {
                            if (opValue == cellIdValUnit) {
                                optionValue = "<option value='" + data[i].unitNum + "'selected = 'selected'>" + data[i].unitNum + "</option>";
                                $("#unitId").val("");
                            }
                        } else {
                            optionValue = "<option value='" + data[i].unitNum + "'>" + data[i].unitNum + "</option>";
                        }
                        $("#unitNoId").append(optionValue);
                    }
                } else {
                    $("#unitNoId").append("<option value='0'>--单元号--</option>");
                }
            }
        })
        selectUnit();
    };

    function selectUnit(){
        var nbhId = $("#houseId").val();
        var cellInfoId = $("#cellInfoId").find("option:selected").text();
        var unitNoId = $("#unitNoId").val();
        $("#roomNoId").empty();
        $.ajax({
            type: 'post',
            url: '${GLOBAL.basePath}/houseInfo/queryCellInfo',
            dataType: "json",
            data: {
                nbhId: nbhId,
                cellInfoId: cellInfoId,
                unitNoId : unitNoId
            },
            success: function (data) {
                if (data.data.length > 0) {
                    $("#roomNoId").append("<option value='0'>--门牌号--</option>");
                    data = data.data;
                    for (var i = 0; i < data.length; i++) {
                        var optionValue;
                        var cellIdValRoom = $("#roomId").val();

                        if (cellIdValRoom != "") {
                            if (data[i].residenters == cellIdValRoom) {
                                optionValue = "<option value='" + data[i].residenters + "'selected = 'selected'>" + data[i].residenters + "</option>";
                                $("#roomId").val("");
                            }
                        } else {
                            optionValue = "<option value='" + data[i].residenters + "'>" + data[i].residenters + "</option>";
                        }
                        $("#roomNoId").append(optionValue);
                    }
                } else {
                    $("#roomNoId").append("<option value='0'>--门牌号--</option>");
                }
            }
        })
    };

    function goBack() {
        document.location.href = "${GLOBAL.basePath}/contract/list";
    }
</script>
